﻿@model WebApp.Models.AccountRegistrationModel
@{
    ViewBag.PageId = "extr-page";
}

@section topright{
    <span id="extr-page-header-space"> <span class="hidden-mobile">Already registered?</span> <a href="@Url.Action("login", "account")" class="btn btn-danger">Sign In</a> </span>
}

<div id="content" class="container">
    <div class="row">
        @{ Html.RenderPartial("_LoginText"); }
        <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4">
            <section class="well no-padding" style="display:none">
                <form action="@Url.Action("register", "account")" method="POST" id="smart-form-register" class="smart-form client-form">
                    <header>
                        Registration
                    </header>
                    @Html.AntiForgeryToken()
                    @Html.ValidationBootstrap()
                    <fieldset>
                        <section>
                            <label class="input">
                                <i class="icon-append fa fa-user"></i>
                                <input type="text" name="username" placeholder="Username" id="username" autocomplete="off" value="@Model.Username">
                                <b class="tooltip tooltip-bottom-right">(Optional) Used to display the profile name on the website</b>
                            </label>
                        </section>
                        <section>
                            <label class="input">
                                <i class="icon-append fa fa-envelope"></i>
                                <input type="email" name="email" placeholder="Email address" id="email" autocomplete="off" value="@Model.Email">
                                <b class="tooltip tooltip-bottom-right">Needed to enter the website</b>
                            </label>
                        </section>
                        @*<section>
                            <label class="input">
                                <i class="icon-append fa fa-envelope"></i>
                                <input type="email" name="emailConfirm" placeholder="Confirm email address" autocomplete="off" value="@Model.EmailConfirm">
                                <b class="tooltip tooltip-bottom-right">Needed to verify your account</b>
                            </label>
                        </section>*@
                        <section>
                            <label class="input">
                                <i class="icon-append fa fa-lock"></i>
                                <input type="password" name="password" placeholder="Password" id="password" autocomplete="off">
                                <b class="tooltip tooltip-bottom-right">Don't forget your password</b>
                            </label>
                        </section>
                        <section>
                            <label class="input">
                                <i class="icon-append fa fa-lock"></i>
                                <input type="password" name="passwordConfirm" placeholder="Confirm password" autocomplete="off">
                                <b class="tooltip tooltip-bottom-right">Don't forget your password</b>
                            </label>
                        </section>
                    </fieldset>
                    <fieldset>
                        <div class="row">
                            <section class="col col-6">
                                <label class="input">
                                    <input type="text" name="firstname" placeholder="First name">
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="input">
                                    <input type="text" name="lastname" placeholder="Last name">
                                </label>
                            </section>
                        </div>
                        <section>


                            <label class="select">
                                @Html.DropDownListFor(model => model.CompanyCode, new SelectList(ViewBag.companylist, "Value", "Text")) <i></i>
                            </label>
                            <input hidden id="companyName" name="companyName" type="text" />

                        </section>
                        <div class="row">

                            <section class="col col-6">
                                <label class="select">
                                    <select name="gender">
                                        <option value="0" selected="selected" disabled="disabled">Gender</option>
                                        <option value="1">Male</option>
                                        <option value="2">Female</option>
                                        <option value="3">Prefer not to answer</option>
                                    </select> <i></i>
                                </label>
                            </section>
                            <section class="col col-6">
                                <label class="input">
                                    <i class="icon-append fa fa-calendar"></i>
                                    <input type="text" name="birthdate" placeholder="Birthdate" class="datepicker" data-dateformat='dd/mm/yy'>
                                </label>
                            </section>
                        </div>
                        <section>
                            <label class="checkbox">
                                <input type="checkbox" name="terms" id="terms">
                                <i></i>I agree with the <a href="#" data-toggle="modal" data-target="#myModal"> Terms and Conditions </a>
                            </label>
                        </section>
                    </fieldset>
                    <footer>
                        <button type="submit" class="btn btn-primary">
                            Register
                        </button>
                    </footer>
                    <div class="message">
                        <i class="fa fa-check"></i>
                        <p>
                            Thank you for your registration!
                        </p>
                    </div>
                </form>
                </section>
            </div>
            
        </div>
    
</div>

 

@section pagespecific{
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/jquery-ui.js" asp-fallback-src="~/js/libs/jquery-ui-1.12.1.js" asp-fallback-test="window.jQuery && window.jQuery.ui" crossorigin="anonymous"></script> 
    <script type="text/javascript">
      $('html').removeClass(['fixed-header', 'fixed-navigation']);
      $('body').removeClass(['fixed-header', 'fixed-navigation']);
      $('.well').show();
      $('.well').addClass(['animated', 'flipInY']);
        // Model i agree button
        //$("#i-agree").click(function () {
        //    var $this = $("#terms");
        //    if ($this.checked) {
        //        $('#myModal').modal('toggle');
        //    } else {
        //        $this.prop('checked', true);
        //        $('#myModal').modal('toggle');
        //    }
        //});
        $('#CompanyCode').change(function () {
            var text = $('#CompanyCode').find('option:selected').text();
            $('#companyName').val(text);
            console.log(text);
        })
        var errorClass = 'invalid';
        var errorElement = 'em';
        // Validation
        $(function () {
            // Validation
          $("#smart-form-register").validate({
                errorClass: errorClass,
                errorElement: errorElement,
                highlight: function (element) {
                    $(element).parent().removeClass('state-success').addClass("state-error");
                    $(element).removeClass('valid');
                },
                unhighlight: function (element) {
                    $(element).parent().removeClass("state-error").addClass('state-success');
                    $(element).addClass('valid');
                },
                // Rules for form validation
                rules: {
                    email: {
                        required: true,
                        email: true
                    },
                    //emailConfirm: {
                    //    required: true,
                    //    email: true,
                    //    equalTo: '#email'
                    //},
                    companyName:{ required: true},
                    password: {
                        required: true,
                        minlength: 4,
                        maxlength: 20
                    },
                    passwordConfirm: {
                        required: true,
                        minlength: 4,
                        maxlength: 20,
                        equalTo: '#password'
                    },
                    firstname: {
                        required: false
                    },
                    lastname: {
                        required: false
                    },
                    gender: {
                        required: false
                    },
                    terms: {
                        required: true
                    }
                },

                // Messages for form validation
                messages: {
                    email: {
                        required: 'Please enter your email address',
                        email: 'Please enter a VALID email address'
                    },
                    //emailConfirm: {
                    //    required: 'Please enter your email address one more time',
                    //    email: 'Please enter a VALID email address',
                    //    equalTo: 'Please enter the same email address as above'
                    //},
                    password: {
                        required: 'Please enter your password'
                    },
                    passwordConfirm: {
                        required: 'Please enter your password one more time',
                        equalTo: 'Please enter the same password as above'
                    },
                    terms: {
                        required: 'You must agree with Terms and Conditions'
                    }
                },

                // Do not change code below
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                }
            });
        });
    </script>
}